<template>
  <div class="card2 padding-16 " @click="gotoInfo">
    <div class="card-padding flex-column" style="gap: 20px;">
      <div class="flex-column flex-center" style="gap: 10px">
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size="90"></el-avatar>
        <span style="font-family: tangti; font-size: 24px;font-weight: lighter;">{{ teacherInfo.name }}<span
            style="font-size: small;">&nbsp;{{ teacherInfo.title
            }}</span></span>
        <div class="flex-column flex-center schoolText">
          <div>{{ teacherInfo.university || "暂未填写学校哦!" }}</div>
          <div>{{ teacherInfo.department }}</div>
        </div>
        <div class="flex-row" style="gap: 4px;flex-wrap: wrap;">
          <el-tag size="medium" style="color: white;font-weight: bold;" color="rgb(129, 208, 223)" v-for="item in teacherInfo.searchWay"
            :key="item"> {{ item }} </el-tag>
            <el-tag size="medium" style="color: white;font-weight: bold;" color="rgb(112 191 115)" v-for="item in teacherInfo.hobby"
            :key="item"> {{ item }} </el-tag>
        </div>
        <div class="card-padding flex-row flex-center" style="position: absolute;bottom: 8px;">
          <div class="button-green font-gradient">H-index:&nbsp;<span style="color: rgb(224 204 19);font-size: large;font-weight: 800;">{{ teacherInfo.hindex }}</span></div>
          <div class="button-green font-gradient">推荐率:&nbsp;<span style="color: rgb(76, 175, 80);font-size: large;font-weight: 800;">{{ (teacherInfo.similarity*100).toFixed(2) }}%</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import RecommendService from '@/service/RecommendService';
import { Message } from 'element-ui';
import { deepClone } from '@/util/getToken';
export default {
  name: "RecommandCardAll",
  props: {
    teacherIf: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      teacherInfo: [],
      contactList: []
    };
  },

  mounted() {
    // this.allContact()
    this.teacherInfo = deepClone(this.teacherIf)
    this.teacherInfo.searchWay = this.teacherInfo.searchWay==null ? [] : this.teacherInfo.searchWay.split(";")
    this.teacherInfo.hobby = this.teacherInfo.hobby==null ? [] : this.teacherInfo.hobby.split(";")

  },

  methods: {
    gotoInfo() {
      this.$router.push({ name: 'teacherDetail', params: { id: this.teacherInfo.id, university: this.teacherInfo.university, name: this.teacherInfo.name, department: this.teacherInfo.department, toType: 1 } });
    },
    async allContact() {
      try {
        const response = await RecommendService.allContact({ id: sessionStorage.getItem("userId") })
        if (response.code == 0) {
          this.contactList = response.data
        }
      } catch (error) {
        Message.error(error)
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.schoolText {
  font-size: 14px;
  // color: rgba(120, 133, 143, 1);
  font-weight: 600;
}

.card2 {
  border-radius: 21px;

  box-shadow: 0px 14px 40px 0px rgba(109, 141, 173, 0.25);
  background: rgb(255, 255, 255);
  /* BG */
  // position: absolute;
  position: relative;
  width: 256px;
  height: 322px;
}

.card {
  width: 18%;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(204, 235, 255, 0.8) 0%, rgba(152, 210, 252, 0.3) 100%);
  border: 1px solid undefined;
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 18px;

  &:hover {
    box-shadow: 0 0 20px 1px #d2d0d0;
    /*盒子阴影*/
    transition: all 0.5s;
    /*持续时间*/
  }
}

.card-padding {
  width: 100%;
}


.font-gradient {
  // color: white;
  font-size: 12px;
  opacity: 0.8;
  font-weight: 600;
}

.button-green {
  // border-radius: 50px;
  // background: linear-gradient(180deg, rgba(121, 199, 238, 1) 0%, rgba(93, 176, 218, 1) 100%);
  // box-shadow: 0px 4px 10px rgba(107, 187, 228, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
}
</style>